import React, {Component} from 'react';
import {Row, Col, Form, Table, Breadcrumb, Icon, Steps} from 'antd';
import '../css/orderDetail.css';
import moment from 'moment';
import {outbound} from "../value";
import app from '../AppMethod';
import {Consumer} from "../store";

const Step = Steps.Step;

class orderDetail extends Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            pagination: {
                current: 1
            },
            data: {
                output_id: "",
                output_status: "",
                output_num: "",
                customer_id: "",
                output_money: 0,
                output_need_money: null,
                output_real_money: null,
                output_driver_money: null,
                output_receive_money: null,
                output_back_money: null,
                output_receipt_type: null,
                output_receipt_method: null,
                output_check: "",
                output_logistics_type: "",
                output_logistics: "",
                output_type: "",
                output_check_status: "",
                output_order_time: "",
                output_delivery_time: "",
                output_take_time: "",
                output_take_id: "",
                output_pick_time: null,
                output_pick_end_time: null,
                output_pick_id: null,
                output_match_time: null,
                output_match_id: null,
                output_send_time: null,
                output_send_id: null,
                output_follow_id: "",
                output_express_no: null,
                output_express_type: null,
                stock_id: "",
                car_id: null,
                car_recommend_sort: null,
                car_custom_sort: null,
                output_sale_num: null,
                output_package: null,
                output_single: null,
                output_real_package: null,
                output_real_single: null,
                output_match_package: null,
                output_match_single: null,
                output_receive_name: "",
                output_receive_address: "",
                output_receive_mobile: "",
                output_is_urgent: "",
                output_is_back: "",
                output_is_change: "",
                output_creator: "",
                output_createtime: "",
                output_updatetime: "",
                output_isable: "",
                car_num: null,
                car_start_time: null,
                car_expect_time: null,
                car_back_time: null,
                car_status: null,
                output_follow_name: "",
                output_follow_phone: "",
                output_take_name: "",
                output_take_phone: "",
                output_pick_name: null,
                output_pick_phone: null,
                output_match_name: null,
                output_match_phone: null,
                output_send_name: null,
                output_send_phone: null,
                car_follow_name: null,
                car_follow_phone: null,
                output_detail: [
                    {
                        output_detail_id: "",
                        output_id: "",
                        output_detail_goods_name: "",
                        output_detail_goods_id: "",
                        output_detail_money: null,
                        output_detail_price: null,
                        output_detail_num: null,
                        output_detail_standard: "",
                        output_detail_package: null,
                        output_detail_real_package: null,
                        output_detail_single: null,
                        output_detail_real_single: null,
                        output_detail_creator: "",
                        output_detail_createtime: "",
                        output_detail_isable: ""
                    }
                ]
            }
        }
    };

    columns = [
        {
            title: '商品名',
            dataIndex: 'output_detail_goods_name',
            align: 'center'
        },
        {
            title: '件数量',
            dataIndex: 'output_detail_package',
            align: 'center'
        },
        {
            title: '数量异常',
            dataIndex: 'y_sum',
            align: 'center'
        },
        {
            title: '散数量',
            dataIndex: 'output_detail_single',
            align: 'center'
        },
        {
            title: '散数异常',
            dataIndex: 'sy_sum',
            align: 'center'
        }
    ];

    render() {
        const type = this.state.data.output_logistics_type;
        return (
            <div style={{fontFamily: 'PingFang SC Regular, PingFang SC'}}>
                <div style={{background: '#fff'}}>
                    <div style={{paddingBottom: '15px', paddingTop: '20px'}}>
                        <Row style={{fontSize: '18px', color: '#272727'}}>
                            <Icon type="team" style={{color: '#009dff', fontSize: '22px'}}></Icon>
                            <span
                                style={{marginLeft: '20px', fontWeight: 'bold'}}>订单号：{this.state.data.output_num}</span>
                        </Row>
                        <Row style={{marginTop: '20px', fontSize: '14px'}}>
                            <Col offset={1} span={5}>跟单人：{this.state.data.output_follow_name}</Col>
                            <Col span={6}>跟单人联系方式：{this.state.data.output_follow_phone}</Col>
                            <Col span={6}>配送类型：{this.state.data.output_logistics}</Col>
                            <Col span={6} style={{color: '#272727', fontSize: '19px'}}>订单金额<span
                                style={{marginLeft: '20px'}}>￥{this.state.data.output_money}</span></Col>
                        </Row>
                        <Row style={{marginTop: '10px', fontSize: '14px'}}>
                            <Col offset={1} span={5}>客户名称：{this.state.data.output_consumer_name}</Col>
                            <Col span={6}>客户联系方式：{this.state.data.customer_phone}</Col>
                            <Col offset={6} span={6} style={{color: '#00CC33', fontSize: '16px'}}>已收款<span
                                style={{marginLeft: '20px'}}>￥{this.state.data.output_real_money}</span></Col>
                        </Row>
                        <Row style={{marginTop: '10px', fontSize: '14px'}}>
                            <Col offset={1}
                                 span={5}>交货日期：{this.state.data.output_delivery_time != undefined && this.state.data.output_delivery_time.length > 0 ? moment(this.state.data.output_delivery_time).format("YYYY-MM-DD") : ''}</Col>
                            <Col
                                span={6}>销售日期：{this.state.data.output_order_time != undefined && this.state.data.output_order_time.length > 0 ? moment(this.state.data.output_order_time).format("YYYY-MM-DD") : ''}</Col>
                            <Col offset={6} span={6} style={{color: '#ff2727', fontSize: '16px'}}>未收款<span
                                style={{marginLeft: '20px'}}>￥{this.state.data.output_money - this.state.data.output_real_money}</span></Col>
                        </Row>
                    </div>
                    <Row>
                        <Col span={1} style={{
                            height: '35px',
                            textAlign: 'center',
                            color: '#1890FF',
                            borderBottom: '2px solid #1890FF'
                        }}>详情</Col>
                    </Row>
                </div>
                <div style={{margin: '24px 16px', paddingTop: 30, background: '#fff'}}>
                    <Row className="progress">
                        流程进度
                    </Row>
                    <Row className="stepContainer">
                        <Steps progressDot current={Number(this.state.data.output_status)}>
                            <Step title="待接单"/>
                            <Step title="已接单"/>
                            <Step title="配货中"/>
                            <Step title="待对单"/>
                            <Step title="待配送"/>
                            <Step title="待改单"/>
                            <Step title="配送中"/>
                            <Step title="已完成"/>
                        </Steps>
                    </Row>
                    <Row className="stepDetail">
                        <Col span={3} style={{textAlign: 'center'}}>
                            <Row>{this.state.data.output_follow_name}</Row>
                            <Row style={{marginTop: '10px'}}>{this.state.data.output_createtime}</Row>
                        </Col>
                        <Col span={3} style={{textAlign: 'center', paddingRight: '40px'}}>
                            <Row>{this.state.data.output_take_name}</Row>
                            <Row style={{marginTop: '10px'}}>{this.state.data.output_take_time}</Row>
                        </Col>
                        <Col span={3} style={{textAlign: 'center'}}>
                            <Row>{this.state.data.output_pick_name}</Row>
                            <Row style={{marginTop: '10px'}}>{this.state.data.output_pick_end_time}</Row>
                        </Col>
                        <Col span={3} style={{textAlign: 'center'}}>
                            <Row>{this.state.data.output_match_name}</Row>
                            <Row style={{marginTop: '10px'}}>{this.state.data.output_match_time}</Row>
                        </Col>
                        <Col span={3} style={{textAlign: 'center', paddingLeft: '0px'}}>
                            <Row>{this.state.data.output_send_name}</Row>
                            <Row style={{marginTop: '10px'}}>{this.state.data.output_send_start_time}</Row>
                        </Col>
                        <Col span={3} style={{textAlign: 'center'}}>
                            <Row></Row>
                            <Row style={{marginTop: '10px'}}></Row>
                        </Col>
                        <Col span={3} style={{textAlign: 'center'}}>
                            <Row></Row>
                            <Row style={{marginTop: '10px'}}></Row>
                        </Col>
                        <Col span={3} style={{textAlign: 'center'}}>
                            <Row>{this.state.data.output_send_name}</Row>
                            <Row style={{marginTop: '10px'}}>{this.state.data.car_back_time}</Row>
                        </Col>
                    </Row>
                </div>
                <div style={{margin: '24px 16px', paddingTop: 30, background: '#fff'}}>
                    <Row className="progress" style={{fontSize: '18px', color: '#272727'}}>
                        接单人信息
                    </Row>
                    <Row className="orderTakers">
                        <Col span={4}>接单人姓名：<span>{this.state.data.output_take_name}</span></Col>
                        <Col span={7}>接单时间：<span>{this.state.data.output_take_time}</span></Col>
                        <Col span={6}>联系电话：<span>{this.state.data.output_take_phone}</span></Col>
                    </Row>
                </div>
                <div style={{margin: '24px 16px', paddingTop: 30, background: '#fff'}}>
                    <Row className="progress" style={{fontSize: '18px', color: '#272727'}}>
                        配货信息
                    </Row>
                    <Row className="orderTakers">
                        <Col span={4}>配货人：<span>{this.state.data.output_pick_name}</span></Col>
                        <Col span={7}>开始配货时间：<span>{this.state.data.output_pick_time}</span></Col>
                        <Col span={6}>联系电话：<span>{this.state.data.output_pick_phone}</span></Col>
                    </Row>
                    <Row style={{paddingLeft: '24px'}}>
                        <Col span={4}>件数：<span>{this.state.data.output_match_package}</span></Col>
                        <Col span={7}>散件数：<span>{this.state.data.output_match_parts}</span></Col>
                        <Col span={6}>散包数：<span>{this.state.data.output_match_single}</span></Col>
                    </Row>
                    <Row style={{paddingLeft: '24px', paddingRight: '24px', paddingBottom: '40px'}}>
                        <Table
                            columns={this.columns}
                            dataSource={this.state.data.output_detail}
                            rowKey={(record, index) => index}
                            pagination={false}
                            loading={this.state.loading}
                        />
                    </Row>
                </div>
                <div style={{margin: '24px 16px', paddingTop: 30, background: '#fff'}}>
                    <Row className="progress" style={{fontSize: '18px', color: '#272727'}}>
                        对单人信息
                    </Row>
                    <Row className="orderTakers">
                        <Col span={4}>对单人姓名：<span>{this.state.data.output_match_name}</span></Col>
                        <Col span={7}>对单时间：<span>{this.state.data.output_match_time}</span></Col>
                        <Col span={6}>联系电话：<span>{this.state.data.output_match_phone}</span></Col>
                    </Row>
                </div>
                <div style={{margin: '24px 16px', paddingTop: 30, paddingBottom: 40, background: '#fff'}}>
                    <Row className="progress" style={{fontSize: '18px', color: '#272727'}}>
                        配送信息
                    </Row>
                    <Row className="orderTakers">
                        {
                            type == 0 || type == 1 ? <span>
                                 <Col span={4}>配送人姓名：<span>{this.state.data.output_send_name}</span></Col>
                                 <Col span={6}>联系电话：<span>{this.state.data.output_send_phone}</span></Col>
                            </span> : ''
                        }
                        {
                            type == 2 ? <span>
                                 <Col span={4}>托运公司：<span>{this.state.data.car_logistics_name}</span></Col>
                                 <Col span={6}>联系电话：<span>{this.state.data.car_logistics_phone}</span></Col>
                            </span> : ''
                        }
                        <Col span={7}>配送时间：<span>{this.state.data.output_send_start_time}</span></Col>
                    </Row>
                    <Row style={{paddingLeft: '24px'}}>
                        <Col span={4}>送货件数：<span>{this.state.data.output_real_package}</span></Col>
                        <Col span={4}>送货散件数：<span>{this.state.data.output_real_parts}</span></Col>
                    </Row>
                    {
                        type == 0 ? <Row style={{paddingLeft: '24px', marginTop: '15px'}}>
                            <Row>
                                <Col span={4}>送货类型：<span>{this.state.data.output_logistics}</span></Col>
                                <Col span={4}>跟车人：<span>{this.state.data.car_follow_name}</span></Col>
                                <Col span={4}>跟车人电话：<span>{this.state.data.car_follow_phone}</span></Col>
                                <Col span={4}>车牌号：<span>{this.state.data.car_num}</span></Col>
                            </Row>
                            <Row style={{marginTop: '10px'}}>
                                <Col span={4}>回来时间：<span>{this.state.data.car_back_time}</span></Col>
                                <Col span={4}>预计到达时间：<span>{this.state.data.car_expect_time}</span></Col>
                            </Row>
                        </Row> : ''
                    }
                    {
                        type == 1 ? <Row style={{paddingLeft: '24px', marginTop: '15px'}}>
                            <Row>
                                <Col span={4}>送货类型：<span>{this.state.data.output_logistics}</span></Col>
                                <Col span={4}>跟车人：<span>{this.state.data.car_follow_name}</span></Col>
                                <Col span={4}>跟车人电话：<span>{this.state.data.car_follow_phone}</span></Col>
                                <Col span={4}>客户车牌：<span>{this.state.data.car_customer_num}</span></Col>
                            </Row>
                            <Row style={{marginTop: '10px'}}>
                                <Col span={4}>车牌号：<span>{this.state.data.car_num}</span></Col>
                                <Col span={4}>回来时间：<span>{this.state.data.car_back_time}</span></Col>
                                <Col span={4}>预计到达时间：<span>{this.state.data.car_expect_time}</span></Col>
                            </Row>
                        </Row> : ''
                    }
                    {
                        type == 2 ? <Row style={{paddingLeft: '24px', marginTop: '15px'}}>
                            <Row>
                                <Col span={4}>送货类型：<span>{this.state.data.output_logistics}</span></Col>
                                <Col span={4}>车牌号：<span>{this.state.data.car_num}</span></Col>
                                <Col span={6}>托运单号：<span>{this.state.data.car_check_num}</span></Col>
                            </Row>
                            <Row style={{marginTop: '10px'}}>
                                <Col span={4}>回来时间：<span>{this.state.data.car_back_time}</span></Col>
                            </Row>
                        </Row> : ''
                    }
                    {
                        type == 3 ? <Row style={{paddingLeft: '24px', marginTop: '15px'}}>
                            <Col span={4}>送货类型：<span>{this.state.data.output_logistics}</span></Col>
                            <Col span={4}>快递单号：<span>{this.state.data.output_express_no}</span></Col>
                            <Col span={4}>快递类型：<span>{this.state.data.output_express_type}</span></Col>
                        </Row> : ''
                    }
                    {
                        type == 4 ? <Row style={{paddingLeft: '24px', marginTop: '15px'}}>
                            <Col span={4}>送货类型：<span>{this.state.data.output_logistics}</span></Col>
                        </Row> : ''
                    }
                </div>
            </div>
        )
    };

    componentDidMount() {
        const {dispatch} = this.props;
        dispatch({menuType: "订单详情"});
        this.handleGetDetailById();
    };

    /**
     * 根据订单id获取订单详情
     */
    handleGetDetailById() {
        let id = this.props.match.params.id;
        app.post(outbound.SEARCH_OUTPUTDETAIL, {output_id: id}).then((result) => {
            if (result.code === 1) {
                let data = result.data;
                data.output_createtime = data.output_createtime === null ? "" : moment(data.output_createtime).format('YYYY-MM-DD HH:mm:ss');
                data.output_order_time = data.output_order_time === null ? "" : moment(data.output_order_time).format('YYYY-MM-DD HH:mm:ss');
                data.output_delivery_time = data.output_delivery_time === null ? "" : moment(data.output_delivery_time).format('YYYY-MM-DD HH:mm:ss');
                data.output_take_time = data.output_take_time === null ? "" : moment(data.output_take_time).format('YYYY-MM-DD HH:mm:ss');
                data.output_pick_time = data.output_pick_time === null ? "" : moment(data.output_pick_time).format('YYYY-MM-DD HH:mm:ss');
                data.output_pick_end_time = data.output_pick_end_time === null ? "" : moment(data.output_pick_end_time).format('YYYY-MM-DD HH:mm:ss');
                data.output_match_time = data.output_match_time === null ? "" : moment(data.output_match_time).format('YYYY-MM-DD HH:mm:ss');
                data.output_send_time = data.output_send_time === null ? "" : moment(data.output_send_time).format('YYYY-MM-DD HH:mm:ss');
                data.car_start_time = data.car_start_time === null ? "" : moment(data.car_start_time).format('YYYY-MM-DD HH:mm:ss');
                data.car_expect_time = data.car_expect_time === null ? "" : moment(data.car_expect_time).format('YYYY-MM-DD HH:mm:ss');
                data.car_back_time = data.car_back_time === null ? "" : moment(data.car_back_time).format('YYYY-MM-DD HH:mm:ss');
                data.output_send_start_time = data.output_send_start_time === null ? "" : moment(data.output_send_start_time).format('YYYY-MM-DD HH:mm:ss');
                if (data.output_real_money == null || data.output_real_money == undefined) {
                    data.output_real_money = "0.00";
                }
                let outputDetail = data.output_detail;
                for (let i = 0; i < outputDetail.length; i++) {
                    outputDetail[i].id = i + '';
                    let num1 = outputDetail[i].output_detail_package - outputDetail[i].output_detail_real_package;
                    let num2 = outputDetail[i].output_detail_single - outputDetail[i].output_detail_real_single;
                    if (num1 > 0) {
                        outputDetail[i].y_sum = "+" + num1;
                    } else if (num1 <= 0) {
                        outputDetail[i].y_sum = num1;
                    }
                    if (num2 > 0) {
                        outputDetail[i].sy_sum = "+" + num1;
                    } else if (num1 <= 0) {
                        outputDetail[i].sy_sum = num1;
                    }
                }
                data.output_detail = outputDetail;
                console.log(outputDetail);
                this.setState({data});
                console.log(result.data);
            } else {
                app.alert(result.msg);
            }
        })
    }

};


const OrderDetails = Form.create()(orderDetail);
export default prop => (
    <Consumer>
        {
            props => (
                <OrderDetails {...prop} {...props}/>
            )
        }
    </Consumer>
);